<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>选择坐标</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  {include file="public/css"/}
</head>
<body>
  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-card layui-col-md12">
          <!-- <div class="layui-card-header"><i class="fa fa-list"></i> 表单列表</div> -->
          <div class="layui-card-body" pad15>
						<div class="layui-form-item">
							<label class="layui-form-label" style="width:50px">地址</label>
							<div class="layui-input-inline" style="width:500px">
								<input type="text" id="address" lay-verify="required" lay-verType="tips" class="layui-input" value="{$Request.param.address}">
							</div>
							<button class="layui-btn layui-btn-primary" id="searchbtn">搜索</button>
						</div>
						<div class="layui-form-item" style="margin-bottom:0">
							<label class="layui-form-label" style="width:50px"></label>
							<div id="l-map" style="width:600px;height:340px">地图加载中...</div>
							<div style="margin-left:110px">
								<input type="hidden" id="mapjd" value="{if input('param.jd')}{$Request.param.jd}{else}116.397827{/if}"/>
								<input type="hidden" id="mapwd" value="{if input('param.wd')}{$Request.param.wd}{else}39.90374{/if}"/>
							</div>
						</div>
          </div>
        </div>
    </div>
  </div>
	{include file="public/js"/}
	<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=ABLBZ-4BIKU-GFTVB-BK7IK-OLQ35-QCBFF"></script>
	<script>
	
	var searchService, map,markers = [],marker = null;
	var jd = $('#mapjd').val();
	var wd = $('#mapwd').val();
	window.onload=function(){
		function init(){
			var center = new qq.maps.LatLng(wd,jd);
			var map = new qq.maps.Map(document.getElementById("l-map"), {
				center: center,      // 地图的中心地理坐标。
				zoom:15              // 地图的中心地理坐标。
			});	
			var marker = new qq.maps.Marker({ position:center, map: map});
			markers.push(marker);
			 //绑定单击事件添加参数
			qq.maps.event.addListener(map, 'click', function(event) {
				clearOverlays(markers);
				$("#mapjd").val(event.latLng.getLng());
				$("#mapwd").val(event.latLng.getLat());
				var marker = new qq.maps.Marker({ position: new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng()) , map: map
				});
				markers.push(marker);
			});
			//设置Poi检索服务，用于本地检索、周边检索
			searchService = new qq.maps.SearchService({
				//设置搜索范围为北京
				location: center.lat+"," +center.lng,
				//设置搜索页码为1
				pageIndex: 1,
				//设置每页的结果数为5
				pageCapacity: 5,
				//设置展现查询结构到infoDIV上
				// panel: document.getElementById('infoDiv'),
				//设置动扩大检索区域。默认值true，会自动检索指定城市以外区域。
				autoExtend: true,
				//检索成功的回调函数
				complete: function(results) {
					//设置回调函数参数
					var pois = results.detail.pois;
					var infoWin = new qq.maps.InfoWindow({
						map: map
					});
					var latlngBounds = new qq.maps.LatLngBounds();
					for (var i = 0, l = pois.length; i < l; i++) {
						var poi = pois[i];
						//扩展边界范围，用来包含搜索到的Poi点
						latlngBounds.extend(poi.latLng);
						(function(n) {
							var marker = new qq.maps.Marker({
								map: map
							});
							marker.setPosition(pois[n].latLng);
							marker.setTitle(i + 1);
							markers.push(marker);
							qq.maps.event.addListener(marker, 'click', function() {
								$("#mapjd").val(pois[n].latLng.lng);
								$("#mapwd").val(pois[n].latLng.lat);
								infoWin.setPosition(pois[n].latLng);
							});
						})(i);
					}
					//调整地图视野
					map.fitBounds(latlngBounds);
				},
				//若服务请求失败，则运行以下函数
				error: function() {
					dialog("请先搜索省市区再搜索详细地址");
				}
			});
		}
		init();
	}
	//清除地图上的marker
    function clearOverlays(overlays) {
        var overlay;
        while (overlay = overlays.pop()) {
            overlay.setMap(null);
        }
    }
	$("#searchbtn").click(function(){
		var address = $("#address").val();
		if(address == ""){
			dialog("请输地址！");
			return ;
		}
		 clearOverlays(markers);
		//根据输入的关键字在搜索范围内检索
    searchService.search(address);
	});
	</script>
</body>
</html>